<template>
  <div class="warehouse-search">
    <ElForm :model="searchForm" :inline="true" label-width="80px">
      <ElFormItem label="仓库编号">
        <ElInput
          v-model="searchForm.warehouseNo"
          placeholder="请输入仓库编号"
          clearable
          style="width: 200px"
        />
      </ElFormItem>

      <ElFormItem label="仓库名称">
        <ElInput
          v-model="searchForm.warehouseName"
          placeholder="请输入仓库名称"
          clearable
          style="width: 200px"
        />
      </ElFormItem>

      <ElFormItem label="仓库类型">
        <ElSelect
          v-model="searchForm.warehouseType"
          placeholder="请选择仓库类型"
          clearable
          style="width: 150px"
        >
          <ElOption label="普通仓库" value="1" />
          <ElOption label="冷藏仓库" value="2" />
          <ElOption label="危险品仓库" value="3" />
          <ElOption label="保税仓库" value="4" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="状态">
        <ElSelect
          v-model="searchForm.status"
          placeholder="请选择状态"
          clearable
          style="width: 120px"
        >
          <ElOption label="启用" value="1" />
          <ElOption label="禁用" value="0" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="创建时间">
        <ElDatePicker
          v-model="searchForm.createTimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 240px"
        />
      </ElFormItem>

      <ElFormItem>
        <ElButton type="primary" @click="handleSearch">
          <ElIcon><Search /></ElIcon>
          搜索
        </ElButton>
        <ElButton @click="handleReset">
          <ElIcon><Refresh /></ElIcon>
          重置
        </ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import type { WMS } from "@/types/wms";

defineOptions({ name: "WmsWarehouseSearch" });

// 定义事件
const emit = defineEmits<{
  search: [params: WMS.WarehouseQueryParams];
  reset: [];
}>();

// 搜索表单
const searchForm = reactive<WMS.WarehouseQueryParams>({
  warehouseNo: "",
  warehouseName: "",
  warehouseType: "",
  status: "",
  createTimeRange: [],
});

// 搜索
const handleSearch = () => {
  const params: WMS.WarehouseQueryParams = {
    ...searchForm,
  };

  // 处理时间范围
  if (searchForm.createTimeRange && searchForm.createTimeRange.length === 2) {
    params.createTimeStart = searchForm.createTimeRange[0];
    params.createTimeEnd = searchForm.createTimeRange[1];
  }

  emit("search", params);
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    warehouseNo: "",
    warehouseName: "",
    warehouseType: "",
    status: "",
    createTimeRange: [],
  });
  emit("reset");
};
</script>

<style lang="scss" scoped>
.warehouse-search {
  padding: 16px;
  background: var(--el-bg-color-page);
  border-radius: 4px;
  margin-bottom: 16px;

  .el-form-item {
    margin-bottom: 16px;
  }
}
</style>
